﻿/// <reference path="../BrowserApi.js" />

// Creates a toolbar very similar to the ribbon in Microsoft Office 2007, the idea is to start with a similar toolbar similar to
// the ribbon, and replace it eventually in the future with something more useful.


// All toolbar functionality under one class.
var Toolbar = new function ()
{
    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
    * Global objects * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

    // A reference to the toolbar placeholder.
    this.ToolbarPlaceholder;

    // The toolbar elements are a data structure that the toolbar understands, and uses to create itself.
    this.ToolbarElements;

    // The toolbar has two containers, one that has all the Tab Titles and one that has all the Tabs, the titles are 
    // always visible, and the tabs are always hidden, except the active tab.
    this.TabTitlesContainer;
    this.TabsContainer;

    // The toolbar must know the base path of the toolbar graphics and toolbar icons, this path is specified in the toolbar content file.
    this.IconsPath;
    this.GraphicsPath;

    // A set of references are required to different toolbar areas, the toolbar always knows what is the active tab, what is the active tab 
    // title, and other elements.

    // A reference to the title of the tab that is currently active.
    this.ActiveToolbarTabTitle;

    // A reference to the the tab that is currently active.
    this.ActiveToolbarTab;

    // A reference to the current split button that is clicked and has a menu opened.
    this.CurrentSplitButton = null;

    // A reference to the current popup menu if there are any.
    this.CurrentPopupMenu = null;

    // The current popup menu coordinates
    this.CurrentPopupMenuCoordinates =
    {
        X: 0,
        Y: 0,
        Width: 0,
        Height: 0
    };

    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
    * Creating the toolbar * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

    /* 
    To place this toolbar into a page, create a DIV element inside that page, create a list of Actions, and call the toolbar “create” method.
    The create method will create the toolbar inside the specified div, and will create all actions that are specified in the actions list
    */
    this.Create = function (toolbarPlaceholder, toolbarElements)
    {
        this.ToolbarPlaceholder = toolbarPlaceholder;
        this.ToolbarElements = toolbarElements;

        BrowserApi.DisableSelectAndDrag(this.ToolbarPlaceholder)

        this.IconsPath = toolbarElements.IconsPath;
        this.GraphicsPath = toolbarElements.GraphicsPath;
        this.ToolbarPlaceholder.className = 'Toolbar';

        // Create the tab titles container.
        this.TabTitlesContainer = document.createElement('div');
        this.TabTitlesContainer.className = 'TabTitlesContainer';
        this.ToolbarPlaceholder.appendChild(this.TabTitlesContainer);

        // Create the tabs container.
        this.TabsContainer = document.createElement('div');
        this.TabsContainer.className = 'TabsContainer';
        this.ToolbarPlaceholder.appendChild(this.TabsContainer);

        var isSelected = true;
        for (var toolbarTabName in toolbarElements.Tabs)
        {
            toolbarTabInfo = toolbarElements.Tabs[toolbarTabName];
            this.CreateTabTitle(toolbarTabName, toolbarTabInfo, isSelected);
            var toolbarTab = this.CreateTab(toolbarTabName, isSelected);

            for (var groupName in toolbarTabInfo)
            {
                groupInfo = toolbarTabInfo[groupName];
                this.CreateTabGroup(toolbarTab, toolbarTabName, groupName, groupInfo);
            }

            isSelected = false;
        }
    }

    // Create the titles of all tabs and place them on the top of the toolbar.
    this.CreateTabTitle = function (tabName, toolbarTabInfo, isSelected)
    {
        var tabTitle = document.createElement('div');
        tabTitle.id = "ToolbarTabTitle_" + tabName;
        this.TabTitlesContainer.appendChild(tabTitle);

        var tabTitleLeftBorder = document.createElement('div');
        tabTitle.appendChild(tabTitleLeftBorder);

        var tabTitleText = document.createElement('div');
        tabTitleText.className = 'ToolbarTabTitle_Text';
        tabTitleText.textContent = tabName;
        tabTitle.appendChild(tabTitleText);

        var tabTitleRightBorder = document.createElement('div');
        tabTitle.appendChild(tabTitleRightBorder);

        if (isSelected == true)
        {
            this.ActiveToolbarTabTitle = tabTitle;

            tabTitle.className = 'ToolbarTabTitle_Selected';
            tabTitleLeftBorder.className = 'ToolbarTabTitle_Selected_Left';
            tabTitleRightBorder.className = 'ToolbarTabTitle_Selected_Right';
        }
        else
        {
            tabTitle.className = 'ToolbarTabTitle_Unselected';
            tabTitleLeftBorder.className = 'ToolbarTabTitle_Unselected_Left';
            tabTitleRightBorder.className = 'ToolbarTabTitle_Unselected_Right';
        }

        tabTitle.addEventListener('mouseover', this.HighlightTabTitle, false);
        tabTitle.addEventListener('mouseout', this.RemoveHighlightFromTabTitle, false);
        tabTitle.addEventListener('click', this.ChangeTab, false);
    }


    // Highlight the tab title when the mouse moves over it.
    this.HighlightTabTitle = function (e)
    {
        var tabTitle = e.currentTarget;
        var tabTitleLeftBorder = tabTitle.children[0];
        var tabTitleRightBorder = tabTitle.children[2]

        if (tabTitle.className == 'ToolbarTabTitle_Selected')
        {
            tabTitle.className = 'ToolbarTabTitle_Selected_Hover';
            tabTitleLeftBorder.className = 'ToolbarTabTitle_Selected_Left_Hover';
            tabTitleRightBorder.className = 'ToolbarTabTitle_Selected_Right_Hover';
        }
        else
        {
            tabTitle.className = 'ToolbarTabTitle_Unselected_Hover';
            tabTitleLeftBorder.className = 'ToolbarTabTitle_Unselected_Left_Hover';
            tabTitleRightBorder.className = 'ToolbarTabTitle_Unselected_Right_Hover';
        }
    }

    // Remove the highlight from the tab title when the mouse leave it.
    this.RemoveHighlightFromTabTitle = function (e)
    {
        var tabTitle = e.currentTarget;
        var tabTitleLeftBorder = tabTitle.children[0];
        var tabTitleRightBorder = tabTitle.children[2]

        if (tabTitle.className == 'ToolbarTabTitle_Selected_Hover')
        {
            tabTitle.className = 'ToolbarTabTitle_Selected';
            tabTitleLeftBorder.className = 'ToolbarTabTitle_Selected_Left';
            tabTitleRightBorder.className = 'ToolbarTabTitle_Selected_Right';
        }
        else
        {
            tabTitle.className = 'ToolbarTabTitle_Unselected';
            tabTitleLeftBorder.className = 'ToolbarTabTitle_Unselected_Left';
            tabTitleRightBorder.className = 'ToolbarTabTitle_Unselected_Right';
        }
    }

    // Change the active tab, hide the current tab, and display the new tab.
    this.ChangeTab = function (e)
    {
        var tabTitle = e.currentTarget;
        var tabName = tabTitle.children[1].textContent;

        // unselect
        Toolbar.ActiveToolbarTab.style.display = 'none';

        Toolbar.ActiveToolbarTabTitle.className = 'ToolbarTabTitle_Unselected';
        var tabTitleLeftBorder = Toolbar.ActiveToolbarTabTitle.children[0];
        var tabTitleRightBorder = Toolbar.ActiveToolbarTabTitle.children[2];
        tabTitleLeftBorder.className = 'ToolbarTabTitle_Unselected_Left';
        tabTitleRightBorder.className = 'ToolbarTabTitle_Unselected_Right';

        // locate new tab
        selectedToolbarTab = document.getElementById('ToolbarTab_' + tabName);
        Toolbar.ActiveToolbarTab = selectedToolbarTab;
        selectedToolbarTabTitle = document.getElementById('ToolbarTabTitle_' + tabName);
        Toolbar.ActiveToolbarTabTitle = selectedToolbarTabTitle;

        // select        
        Toolbar.ActiveToolbarTabTitle.className = 'ToolbarTabTitle_Selected_Hover';
        tabTitleLeftBorder = Toolbar.ActiveToolbarTabTitle.children[0];
        var tabTitleRightBorder = Toolbar.ActiveToolbarTabTitle.children[2];
        tabTitleLeftBorder.className = 'ToolbarTabTitle_Selected_Left_Hover';
        tabTitleRightBorder.className = 'ToolbarTabTitle_Selected_Right_Hover';

        Toolbar.ActiveToolbarTab.style.display = 'block';
    }

    // Create an empty tab and return it reference.
    this.CreateTab = function (tabName, isSelected)
    {
        var toolbarTab = document.createElement('div');
        toolbarTab.id = 'ToolbarTab_' + tabName;
        toolbarTab.className = 'Tab';
        if (isSelected == false)
        {
            toolbarTab.style.display = 'none';
        }
        else
        {
            this.ActiveToolbarTab = toolbarTab;
        }
        this.TabsContainer.appendChild(toolbarTab);
        return toolbarTab;
    }

    // Create a group inside a tab, the group is a container for a group of controls (buttons, menues, etc).
    this.CreateTabGroup = function (toolbarTab, tabName, groupName, groupInfo)
    {
        var toolbarGroup = document.createElement('div');
        toolbarGroup.id = 'ToolbarGroup' + '_' + tabName + '_' + groupName;
        toolbarGroup.className = "ToolbarGroup";
        toolbarTab.appendChild(toolbarGroup);

        var toolbarGroupLeft = document.createElement('div');
        toolbarGroupLeft.className = "ToolbarGroup_Left";
        toolbarGroup.appendChild(toolbarGroupLeft);

        var groupContent = document.createElement('div');
        groupContent.className = "ToolbarGroupContent";
        toolbarGroup.appendChild(groupContent);

        var smallButtonsContainer = null;

        for (var groupItemName in groupInfo)
        {
            groupItemInfo = groupInfo[groupItemName];
            switch (groupItemInfo.Type)
            {
                case "LargeSplitButton":
                    {
                        smallButtonsContainer = null;
                        this.CreateLargeSplitButton(groupContent, tabName, groupName, groupItemName, groupItemInfo);
                        break;
                    }
                case "SmallButton":
                    {
                        if (smallButtonsContainer == null)
                        {
                            smallButtonsContainer = this.CreateSmallButtonsContainer(groupContent);
                        }
                        this.CreateSmallButton(smallButtonsContainer, groupItemName, groupItemInfo.Icon, groupItemInfo.Action);
                        break;
                    }
            }
        }

        var groupNamePlaceholder = document.createElement('div');
        groupNamePlaceholder.className = 'ToolbarGroupName'
        groupNamePlaceholder.textContent = groupName;
        groupContent.appendChild(groupNamePlaceholder);

        var toolbarGroupRight = document.createElement('div');
        toolbarGroupRight.className = "ToolbarGroup_Right";
        toolbarGroup.appendChild(toolbarGroupRight);
    }


    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
    * Create a large split button  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

    // Create a large split button, the button is a combination of two elements, the upper element is the button, and the lower element is the menu item.
    this.CreateLargeSplitButton = function (groupContent, tabName, groupName, buttonName, groupInfo)
    {
        var buttonPlaceholder = document.createElement('div');
        buttonPlaceholder.className = "ToolbarSplitButton_Normal";
        groupContent.appendChild(buttonPlaceholder);

        var leftBorder = document.createElement('div');
        leftBorder.className = "ToolbarSplitButton_Normal_LeftBorder";
        buttonPlaceholder.appendChild(leftBorder);

        var buttonContent = document.createElement('div');
        buttonContent.className = 'ToolbarSplitButton_Content';
        buttonPlaceholder.appendChild(buttonContent);

        var buttonIcon = document.createElement('div');
        buttonIcon.className = 'ToolbarSplitButton_Image'
        buttonIcon.style.backgroundImage = "url('" + this.IconsPath + groupInfo.Icon + "')";
        buttonContent.appendChild(buttonIcon);

        var buttonTextContainer = document.createElement('div');
        buttonTextContainer.id = 'SplitButtonText_' + tabName + '_' + groupName + '_' + buttonName
        buttonContent.appendChild(buttonTextContainer);

        var buttonText = document.createElement('p');
        buttonText.className = 'ToolbarSplitButton_Text'
        buttonText.textContent = buttonName;
        buttonTextContainer.appendChild(buttonText);

        var buttonArrow = document.createElement('img');
        buttonArrow.src = this.GraphicsPath + "SplitButton-DownArrow.png";
        buttonTextContainer.appendChild(buttonArrow);

        var rightBorder = document.createElement('div');
        rightBorder.className = "ToolbarSplitButton_Normal_RightBorder";
        buttonPlaceholder.appendChild(rightBorder);

        buttonIcon.addEventListener('mouseover', this.SplitButtonOnMouseOverTop, false)
        buttonIcon.addEventListener('mouseout', this.SplitButtonOnMouseOutTop, false)

        buttonTextContainer.addEventListener('mouseover', this.SplitButtonOnMouseOverBottom, false)
        buttonTextContainer.addEventListener('mouseout', this.SplitButtonOnMouseOutBottom, false)

        //buttonIcon.onclick = Toolbar.ChangeTab;
        buttonTextContainer.addEventListener('mousedown', this.SplitButton_CreateAndOpenMenu, false);
    }

    // Create and open the menu of the split button
    this.SplitButton_CreateAndOpenMenu = function (e)
    {
        var buttonTextContainer = e.currentTarget
        var buttonPlaceholder = buttonTextContainer.parentNode.parentNode;

        if (Toolbar.CurrentPopupMenu != null && Toolbar.CurrentSplitButton == buttonPlaceholder)
        {
            return;
        }

        if (Toolbar.CurrentPopupMenu != null)
        {
            Toolbar.RemoveMenu(e);
        }
        Toolbar.CurrentSplitButton = buttonPlaceholder;

        var path = buttonTextContainer.id.replace('SplitButtonText_', '');
        path = path.replace(/_/g, '.');
        var menuItemsReference = eval('Toolbar.ToolbarElements.Tabs.' + path);
        leftCorner = buttonPlaceholder.offsetLeft;
        topCorner = buttonPlaceholder.offsetTop + buttonPlaceholder.clientHeight + buttonTextContainer.clientHeight;
        Toolbar.CreateMenu(menuItemsReference.MenuItems, leftCorner, topCorner);

        BrowserApi.ScheduleFunction('Toolbar.SplitButton_CloseAndRemoveMenu', null, 50);
    }

    // Close the menu, and remove it from the document.
    this.SplitButton_CloseAndRemoveMenu = function ()
    {
        document.body.addEventListener('mousedown', Toolbar.RemoveMenu, false);
    }

    this.SplitButtonOnMouseOverTop = function (e)
    {
        var buttonPlaceholder = e.currentTarget.parentNode.parentNode;
        if (Toolbar.CurrentPopupMenu != null && Toolbar.CurrentSplitButton == buttonPlaceholder)
        {
            return;
        }

        var leftBorder = buttonPlaceholder.children[0];
        var rightBorder = buttonPlaceholder.children[2];

        buttonPlaceholder.className = "ToolbarSplitButton_HighlightTop";
        leftBorder.className = "ToolbarSplitButton_HighlightTop_LeftBorder";
        rightBorder.className = "ToolbarSplitButton_HighlightTop_RightBorder";
    }

    this.SplitButtonOnMouseOverBottom = function (e)
    {
        var buttonPlaceholder = e.currentTarget.parentNode.parentNode;
        if (Toolbar.CurrentPopupMenu != null && Toolbar.CurrentSplitButton == buttonPlaceholder)
        {
            return;
        }

        var leftBorder = buttonPlaceholder.children[0];
        var rightBorder = buttonPlaceholder.children[2];

        buttonPlaceholder.className = "ToolbarSplitButton_HighlightBottom";
        leftBorder.className = "ToolbarSplitButton_HighlightBottom_LeftBorder";
        rightBorder.className = "ToolbarSplitButton_HighlightBottom_RightBorder";
    }

    this.SplitButtonOnMouseOutTop = function (e)
    {
        var buttonPlaceholder = e.currentTarget.parentNode.parentNode;
        if (Toolbar.CurrentPopupMenu != null && Toolbar.CurrentSplitButton == buttonPlaceholder)
        {
            return;
        }

        var leftBorder = buttonPlaceholder.children[0];
        var rightBorder = buttonPlaceholder.children[2];

        buttonPlaceholder.className = "ToolbarSplitButton_Normal";
        leftBorder.className = "ToolbarSplitButton_Normal_LeftBorder";
        rightBorder.className = "ToolbarSplitButton_Normal_RightBorder";
    }

    this.SplitButtonOnMouseOutBottom = function (e)
    {
        var buttonPlaceholder = e.currentTarget.parentNode.parentNode;
        if (Toolbar.CurrentPopupMenu != null && Toolbar.CurrentSplitButton == buttonPlaceholder)
        {
            return;
        }

        var leftBorder = buttonPlaceholder.children[0];
        var rightBorder = buttonPlaceholder.children[2];

        buttonPlaceholder.className = "ToolbarSplitButton_Normal";
        leftBorder.className = "ToolbarSplitButton_Normal_LeftBorder";
        rightBorder.className = "ToolbarSplitButton_Normal_RightBorder";
    }


    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
    * Create small buttons * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

    this.CreateSmallButtonsContainer = function (groupContent)
    {
        var buttonsContainer = document.createElement('div');
        buttonsContainer.className = 'ToolbarSmallButtonsContainer'
        groupContent.appendChild(buttonsContainer);

        return buttonsContainer;
    }

    this.CreateSmallButton = function (buttonsContainer, buttonName, buttonIconName, buttonAction)
    {
        var buttonPlaceholder = document.createElement('div');
        buttonPlaceholder.className = 'ToolbarSmallButton'
        if (typeof (buttonAction) != 'undefined')
        {
            buttonPlaceholder.id = 'ToolbarSmallButton_' + buttonAction
        }
        buttonsContainer.appendChild(buttonPlaceholder);

        var buttonImage = document.createElement('div');
        buttonImage.style.backgroundImage = "url('" + this.IconsPath + buttonIconName + "')";
        buttonImage.className = 'ToolbarSmallButton_Image'
        buttonPlaceholder.appendChild(buttonImage);

        buttonPlaceholder.addEventListener('mouseover', this.SmallButtonOnMouseOver, false);
        buttonPlaceholder.addEventListener('mouseout', this.SmallButtonOnMouseOut, false);
        buttonPlaceholder.addEventListener('click', this.SmallButtonOnClick, false);
    }

    this.SmallButtonOnMouseOver = function (e)
    {
        var buttonPlaceholder = e.currentTarget;
        buttonPlaceholder.className = 'ToolbarSmallButton_Hover'
    }

    this.SmallButtonOnMouseOut = function (e)
    {
        var buttonPlaceholder = e.currentTarget
        buttonPlaceholder.className = 'ToolbarSmallButton'
    }

    this.SmallButtonOnClick = function (e)
    {
        var buttonPlaceholder = e.currentTarget;
        var actionName = buttonPlaceholder.id.replace('ToolbarSmallButton_', '');
        if (actionName != '')
        {
            eval(actionName + '()');
        }
    }

    /* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
    * Create popup menues  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
    * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

    // Create a menu with menu items.
    this.CreateMenu = function (menuItems, leftCorner, topCorner)
    {
        this.CurrentPopupMenu = document.createElement('div');
        this.CurrentPopupMenu.className = 'ToolbarPopupMenu'
        this.CurrentPopupMenu.style.left = leftCorner + 'px'
        this.CurrentPopupMenu.style.top = topCorner + 'px'
        this.ToolbarPlaceholder.appendChild(this.CurrentPopupMenu);

        var menuItemsContainer = document.createElement('table');
        menuItemsContainer.className = 'ToolbarPopupMenuItemsContainer'
        this.CurrentPopupMenu.appendChild(menuItemsContainer);

        for (var menuItemIndex in menuItems)
        {
            var menuItem = menuItems[menuItemIndex]

            var menuItemContainer = document.createElement('tr');
            menuItemContainer.className = 'ToolbarPopupMenuItem'
            if (typeof (menuItem.Action) != 'undefined')
            {
                menuItemContainer.id = 'ToolbarPopupMenuItem_' + menuItem.Action
            }
            menuItemContainer.addEventListener('mouseover', this.MenuItemOnMouseOverBottom, false);
            menuItemContainer.addEventListener('mouseout', this.MenuItemOnMouseOutBottom, false);
            menuItemContainer.addEventListener('click', this.MenuItemOnMouseClick, false);
            menuItemsContainer.appendChild(menuItemContainer);

            var menuItemImageCell = document.createElement('td');
            menuItemImageCell.className = 'ToolbarPopupMenuItemImageCell'
            menuItemContainer.appendChild(menuItemImageCell);

            var menuItemImage = document.createElement('img');
            menuItemImage.className = 'ToolbarPopupMenuItemImage'
            menuItemImage.src = this.IconsPath + menuItem.Icon
            menuItemImageCell.appendChild(menuItemImage);

            var menuItemTextCell = document.createElement('td');
            menuItemTextCell.className = 'ToolbarPopupMenuItemTextCell'
            menuItemContainer.appendChild(menuItemTextCell);

            var menuItemText = document.createElement('div');
            menuItemText.className = 'ToolbarPopupMenuItemText'
            menuItemText.textContent = menuItemIndex;
            menuItemTextCell.appendChild(menuItemText);
        }
    }

    this.RemoveMenu = function (e)
    {
        if (e != null && e.pageX >= Toolbar.CurrentPopupMenu.offsetLeft
            && e.pageX <= Toolbar.CurrentPopupMenu.offsetLeft + Toolbar.CurrentPopupMenu.offsetWidth
            && e.pageY >= Toolbar.CurrentPopupMenu.offsetTop
            && e.pageY <= Toolbar.CurrentPopupMenu.offsetTop + Toolbar.CurrentPopupMenu.offsetHeight)
        {
            return;
        }
        document.body.removeEventListener('mousedown', Toolbar.RemoveMenu, false);

        var leftBorder = Toolbar.CurrentSplitButton.children[0];
        var rightBorder = Toolbar.CurrentSplitButton.children[2];
        Toolbar.CurrentSplitButton.className = "ToolbarSplitButton_Normal";
        leftBorder.className = "ToolbarSplitButton_Normal_LeftBorder";
        rightBorder.className = "ToolbarSplitButton_Normal_RightBorder";

        Toolbar.ToolbarPlaceholder.removeChild(Toolbar.CurrentPopupMenu);
        Toolbar.CurrentPopupMenu = null;
    }

    this.MenuItemOnMouseOverBottom = function (e)
    {
        var menuItemContainer = e.currentTarget;
        menuItemContainer.className = 'ToolbarPopupMenuItem_Hover'

        var menuItemImageCell = menuItemContainer.children[0];
        menuItemImageCell.className = 'ToolbarPopupMenuItemImageCell_Hover'

        var menuItemTextCell = menuItemContainer.children[1];
        menuItemTextCell.className = 'ToolbarPopupMenuItemTextCell_Hover'
    }

    this.MenuItemOnMouseOutBottom = function (e)
    {
        var menuItemContainer = e.currentTarget;
        menuItemContainer.className = 'ToolbarPopupMenuItem'

        var menuItemImageCell = menuItemContainer.children[0];
        menuItemImageCell.className = 'ToolbarPopupMenuItemImageCell'

        var menuItemTextCell = menuItemContainer.children[1];
        menuItemTextCell.className = 'ToolbarPopupMenuItemTextCell'
    }

    this.MenuItemOnMouseClick = function (e)
    {
        var menuItemContainer = e.currentTarget;
        var actionName = menuItemContainer.id.replace('ToolbarPopupMenuItem_', '');
        if (actionName != '')
        {
            eval(actionName + '()');
        }
        Toolbar.RemoveMenu(null);
    }
}